<template>
  <div class="header">
    <img class="logo" src="@/assets/image/logo.svg" />
    <span class="sitename">源效</span>

    <div class="header-right">
      <img class="avatar" src="@/assets/image/avatar.png" />
      <img class="arrow" src="@/assets/image/md-arrow_drop_down.png" />
    </div>
  </div>
  <div class="sidebar">
    <el-menu default-active="dashboard" @select="handleMenuSelect">
      <template v-for="item in menus" :key="item.path">
        <template v-if="item.childs">
          <el-sub-menu :index="item.path">
            <template #title>
              <img class="icon" :src="item.icon" />
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item v-for="child in item.childs" :key="child.path" :index="child.path">
              {{ child.name }}
            </el-menu-item>
          </el-sub-menu>
        </template>

        <template v-else>
          <el-menu-item :index="item.path">
            <img class="icon" :src="item.icon" />
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>

      </template>
    </el-menu>
  </div>
  <div class="content">
    <div class="content-header">
      {{data.contentTitle}}
    </div>
    <div class="content-body">
      <RouterView />
    </div>

  </div>
</template>

<script setup lang="ts">
//图片
import dashboard from '@/assets/image/dashboard.png'
import project from '@/assets/image/project.png'
import server from '@/assets/image/server.png'

let data = reactive({
  contentTitle: '控制台', //内容区域标题
})

//菜单
let menus = [{
  path: 'dashboard',
  name: '控制台',
  icon: dashboard
},
{
  path: 'projects',
  name: '项目',
  icon:  project,
  childs: [{
    path: 'code',
    name: '代码库'
  },
  {
    path: 'project',
    name: '项目'
  },
  {
    path: 'artifact',
    name: '制品'
  }
  ]
},
{
  path: 'servers',
  name: '服务器',
  icon: server,
  childs: [{
    path: 'server',
    name: '服务器'
  }]
}
]

let menuMap = new Map()
for (let menu of menus) {
  menuMap.set(menu.path, menu.name) 
  if (menu.childs) {
    for (let child of menu.childs) {
      menuMap.set(child.path,child.name)
    }
  }
}

let handleMenuSelect = (index: any) => {
  data.contentTitle = menuMap.get(index)
}
</script>

<style scoped lang="less">
.header {
  height: 60px;
  background-color: #409eff;
  display: flex;
  align-items: center;

  .logo {
    width: 48px;
    height: 48px;
    margin-left: 16px;
  }

  .sitename {
    font-size: 32px;
    color: #ffffff;
    margin-left: 8px;
  }

  .header-right {
    position: absolute;
    right: 16px;
    display: flex;
    align-items: center;

    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: #ffffff;
    }

    .arrow {
      width: 24px;
      height: 24px;
    }
  }
}

.sidebar {
  width: 200px;
  height: 100%;
  overflow: auto;

  :deep(.el-menu) {
    border-right: none;
  }

  .icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
}

.content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 200px;
  top: 60px;
  height: 100%;
  overflow: auto;
  background-color: #f1f1f1;

  .content-header {
    width: 100%;
    height: 55px;
    line-height: 55px;
    padding-left: 16px;
    font-size: 18px;
    font-weight: 500;
    background-color: #ffffff;
    border-left: 1px solid #f1f1f1;
  }
}
</style>
